<template>
  <div class="poliy">
    <el-form :model="selectTable" ref="selectTable" :rules="rules" label-width="180px">

    <p class="tip_n">策略基本信息</p>
    <div class="form-inner">
        <el-form-item label="策略名称：" prop="name">
        <el-input v-model="selectTable.name" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="策略生效时间：" prop="enableDate" >
        <el-date-picker type="date" placeholder="选择日期" v-model="selectTable.enableDate" value-format="yyyy-MM-dd" style="width: 400px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="策略失效时间：" prop="disableDate" >
        <el-date-picker type="date" placeholder="选择日期" v-model="selectTable.disableDate" value-format="yyyy-MM-dd" style="width: 400px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="策略类型：" prop="mode">
        <el-select v-model="selectTable.mode" placeholder="请选择告警类型" style="width: 400px;" @change="changeStrageyMode">
            <el-option key="1" label="定时策略" value="1"></el-option>
            <el-option key="2" label="日出策略" value="2"></el-option>
            <el-option key="3" label="日落策略" value="3"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="选择时间：" prop="tm" ref="tmRef" v-if="isTiming == 1">
            <el-time-picker
                v-model="selectTable.tm"
                :picker-options="{
                    selectableRange: ''
                }"
                placeholder="选择时间点">
            </el-time-picker>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkedWeeks" @change="handleCheckedCitiesChange" class="weeks">
                <el-checkbox v-for="week in weeks" :label="week" :key="week">{{week}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="日出偏移量：" prop="minutes" ref="sunriseRef" v-if="isTiming == 2">
            <el-select v-model="increaseOrDecrease" placeholder="请选择" style="width: 90px">
                <el-option label="+" value="1"></el-option>
                <el-option label="-" value="2"></el-option>
            </el-select>
            <el-input v-model="selectTable.minutes" size="small" style="width: 100px"></el-input> 分钟
        </el-form-item>
        <el-form-item label="日落偏移量：" prop="minutes" ref="sunriseRef" v-if="isTiming == 3">
            <el-select v-model="increaseOrDecrease" placeholder="请选择" style="width: 90px">
                <el-option label="+" value="1"></el-option>
                <el-option label="-" value="2"></el-option>
            </el-select>
            <el-input v-model="selectTable.minutes" size="small" style="width: 100px"></el-input> 分钟
        </el-form-item>
        <el-form-item label="是否启用：" prop="isEnable">
            <el-switch
                v-model="selectTable.isEnable"
                active-color="#409EFF"
                inactive-color="#ccc">
            </el-switch>
        </el-form-item>
    </div>

    <div class="line"></div>

    <p class="tip_n">策略动作目标</p>
      <el-form-item label="策略使用设备："  prop="tDevName" class="stragey-search">
        <el-input v-model="selectTable.tDevName"  placeholder="请输入设备名称/设备ID/传感器名称/传感器MAC" style="width: 400px;">
            <el-button slot="append" icon="el-icon-search" @click="searchDevice()"></el-button>
        </el-input>

        <el-button-group class="btns-group">
            <el-button @click="filterDevice(1)" :class="{'cur': filterDeviceType == 1}">全部</el-button>
            <el-button @click="filterDevice(2)" :class="{'cur': filterDeviceType == 2}">已选择</el-button>
        </el-button-group>
      </el-form-item>

      <div class="po_taL">
        <el-table
          :data="deviceList" @selection-change="handleSelectionChange"
          border
          style="width: 950px">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            prop="id"
            label="设备ID"/>
          <el-table-column
            prop="name"
            label="设备名称"/>
          <el-table-column
            prop="mode"
            label="设备型号"/>
          <el-table-column
            prop=""
            label="所属商户"/>
          <el-table-column
            prop=""
            label="端口"/>
          <el-table-column
            prop=""
            label="关联传感器类型"/>
          <el-table-column
            prop=""
            label="关联传感器名称"/>
          <el-table-column
            prop=""
            label="关联传感器MAC"/>
        </el-table>
      </div>


    <el-form-item label="执行动作：">
      <el-radio-group v-model="selectTable.resource" style="width: 400px;">
        <el-radio :label="1">打开</el-radio>
        <el-radio :label="2">闭合</el-radio>
      </el-radio-group>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        checkAll: false,
        isIndeterminate: true,
        isTiming: 1,
        weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        checkedWeeks: [],
        increaseOrDecrease: '1',
        filterDeviceType: 1,
        selectTable:{
          tm: '',
          isEnable: false,
          minutes: '',
          name:'',
          enableDate:'',
          disableDate: '',
          mode:'',
          check:[],
          resource: 1,
          tDevName: ''
        },
        deviceList: [{
           id: 1
        }],
        rules: {
            name: {required: true, message: '请输入策略名称', trigger: 'blur'},
            enableDate: {required: true, message: '请选择策略生效时间', trigger: 'blur'},
            disableDate: {required: true, message: '请选择策略失效时间', trigger: 'blur'},
            mode: {required: true, message: '请选择策略类型', trigger: 'change'},
            tm: {required: true, message: '请选择时间', trigger: 'change'},
            minutes: {required: true, message: '请输入分钟数', trigger: 'blur'}
        }
      }
    },
    created() {
      this.initData()
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedWeeks = val ? this.weeks : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.weeks.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.weeks.length;
      },
      // 全选
      handleSelectionChange(val) {
          this.multipleSelection = val
      },
      changeStrageyMode() {
        this.isTiming = this.selectTable.mode
        if(this.isTiming == 2 || this.isTiming == 3) {
            this.$refs['tmRef'] && this.$refs['tmRef'].clearValidate()
        }
        if(this.isTiming == 1) {
             this.$refs['sunriseRef'] && this.$refs['sunriseRef'].clearValidate()
        }
      },
      async initData(){},
      searchDevice() {},
      filterDevice(type) {
          this.filterDeviceType = type
      },
      onSubmit() {
        this.$message({
          message: '策略添加成功',
          type: 'success'
        });
      }
    },
  }
</script>

<style lang="less" scoped>
    .poliy {
        background: #fff;
        padding: 20px;
        line-height: 25px;
        overflow: hidden;
    }
    .tip_n {
        border-bottom: 1px solid #ececec;
        padding-bottom: 10px;
        font-weight: bold;
    }
    .weeks {
        display: inline-block!important;
    }
    .stragey-search {
        padding: 20px 0 0 0;
    }
    .poliy .form-inner {
        padding-top: 20px;
    }
    .po_taL {
        padding-left: 180px;
    }
    .btns-group {
        margin-left: 420px;
    }
    .btns-group .cur {
        border: 1px solid #409EFF;
        color: #409EFF;
    }
</style>
